<template>
	<div style="height: 100%;">

		<div style="display: flex; height: 100%; flex:1">
			<div style="margin-left: 2%; min-width: 200px; height: 100%; flex: 1; background-color: #f5f5f5;">
				<div style="border: 1px solid lightgray; min-width: 200px; height: 100%;">
					<div style="display: flex; height: 63px; width: 100%; justify-content: center; margin-top: 2px;">
						<img :src="'http://127.0.0.1/api/public/showimg/'+img"/>
					</div>

					<el-menu :router=true :default-active="$route.path" class="el-menu-vertical-demo"
						text-color="#606266" active-text-color="#409EFF" :unique-opened="true"
						style="height: 100%; min-height: 75vh;">
						<el-menu-item index="/pc/uppwd">
							<span slot="title">密码修改</span>
						</el-menu-item>
						<el-menu-item index="/pc/uppic">
							<span slot="title">个人头像修改</span>
						</el-menu-item>
						<el-menu-item index="/pc/upusr">
							<span slot="title">个人信息修改</span>
						</el-menu-item>
						<el-menu-item index="/pc/pchome">
							<span slot="title">返回首页</span>
						</el-menu-item>
					</el-menu>
				</div>
			</div>
			<div style="width:98%; padding-left: 2%;">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'PCUser',
		data() {
			return {
				nickname: "未登录",
				img : '',
			}
		},
		methods: { //处理函数
			quit() {
				localStorage.setItem("token", "")
				localStorage.setItem("nickname", "")
				localStorage.setItem("account", "")
				this.nickname = "";
				this.$router.push("/fore");
			}
		},
		created() {
			this.img = localStorage.getItem('img');
		},
		mounted() {
			//预加载
			this.nickname = localStorage.getItem("nickname");
		}
	}
</script>

<style scoped>
	a {
		color: rosybrown
	}
	.el-menu-item.is-active {
		background-color: rgb(200, 199, 199) !important;
	}
	.tomcontainer {
		position: fixed;
		z-index: 1;
		display: flex;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		line-height: 60px;
		font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
		background: linear-gradient(to bottom, #d1d1d1, #f4f4f4, #f5f5f5);
	}
	.tomlogo {
		width: 65%;
		padding-left: 2%;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
		border-color: rgba(238, 241, 146, 0.3);
		border-right-width: 0px;
		border-right-style: solid;
	}
	.tomuserinfo {
		width: 20%;
		height: 60px;
		line-height: 60px;
		font-size: 14px;
	}
	.tomuserinfo>span {
		margin: 0px;
		padding: 0px;
		height: 100%;
	}
</style>